<template>
  <div class="pair_container">
    <div class="img_box">
      <img src="../../assets/img/banLoveAdopt.jpg" />
    </div>
    <div class="title">
      <p>丢失找寻</p>
    </div>
    <pet-list class="list"
              :toCategory="categoryId"
              v-on:toUserId="toUserId"
              v-on:toContactName="toContactName"></pet-list>
  </div>
</template>
<script>
export default {
  data () {
    return {
      categoryId: 1004
    }
  },
  methods: {
    // 获取到子组件的消息接收者id
    toUserId (userId) {
      console.log(userId)
      this.$emit('toUserId', userId);
    },
    toContactName (name) {
      console.log(name)
      this.$emit('toContactName', name);
    }
  }
}
</script>
<style lang="less"
PetList scoped>
.pair_container {
  width: 100%;
  .img_box {
    width: 100%;
    margin-top: 90px;
    img {
      width: 100%;
    }
  }
  .title {
    height: 60px;
    width: 200px;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: violet;
    p {
      color: white;
      font-weight: bold;
      font-family: "幼圆";
    }
  }
  .list {
    margin-top: 50px;
  }
}
</style>